<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05事件和计算属性</title>
</head>
<body>
<div id="app">
    计算器：{{ counter }}<br>
    <button v-on:click="counter++">counter++</button>
    <button v-on:click="counter+=2">counter+=2</button>
    <button v-on:click="addCounter()">addCounter()</button><br>
    <diV>{{ firstName + lastName }}</diV>
    <!--计算属性会缓存结果，当用到的属性值没改变时，不会重新执行方法而是直接使用缓存的结果-->
    <div>{{ fullName01 }}</div>
    <div>{{ fullName02 }}</div>
    <!--处理复杂逻辑时可以封装成方法，这样逻辑清晰调用方便，缺点是没缓存每次都必须执行方法，在复杂的情况下会影响性能-->
    <div>{{ getFullName01() }}</div>
    <div>{{ getFullName02() }}</div>
</div>
<script src="../vue.global.3.0.5.js"></script>
<script>
    //声明一个选项对象
    const App={
        //初始数据
        data() {
            return {
                counter: 100,
                firstName: "Lee",
                lastName: "Long"
            }
        },
        methods: {
            addCounter() {
                if(this.counter%2==0) {
                    this.counter++;
                }
                else {
                    this.counter+=2;    
                }
            },
            getFullName01() {
                return "getFullName01: " + this.firstName + this.lastName;
            },
            getFullName02: function() {
                return "getFullName02: " + this.firstName + this.lastName;
            }
        },
        computed: {
            fullName01() {
                return "fullName01: " + this.firstName + this.lastName;
            },
            fullName02: function() {
                return "fullName02: " + this.firstName + this.lastName;
            }
        }
    }

    //全局API对象，创建应用对象返回(选项对象).挂载方法(DOM节点)
    const vm = Vue.createApp(App).mount("#app");
</script>
</body>
</html>